<template>
    <view id="main">
        <!-- 顶部搜索框 -->
        <zy-topBar searchwidth="90%" scarchBottom showBack v-model="searchParam" @search="search" title="选择废物"
            paddingTop="50" height="40">
            <template #right>
                <view @tap="goBack" class="fs_12">确定</view>
            </template>
        </zy-topBar>
        <view class="content">
            <scroll-view scroll-y>
                <view v-for="item in outStore.tableDataList" class="item card flex">
                    <image v-if="item.statusCode == '1'" class="small_Icon" src="@/static/img/checked.png" />
                    <image v-else class="small_Icon" src="@/static/img/unchecked.png" />
                    <view class="item_content flex">
                        <view class="title fs_18 flex">
                            <view class="value">{{ item.name }}</view>
                        </view>
                        <view class="msg flex fs_12 color_text_gray">
                            <view class="label">废物类别</view>
                            <view class="value">{{ item.code }}</view>
                        </view>
                        <view class="msg flex fs_12 color_text_gray">
                            <view class="label">废物代码</view>
                            <view class="value">{{ item.code }}</view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { useOutStore } from "@/stores/modules/out/out";
const outStore = useOutStore();
const searchParam = ref("");
const search = (val: string) => {
    console.log(val);
};
const goBack = () => {
    uni.navigateBack();
};

</script>

<style lang="scss" scoped>
scroll-view {
    height: calc(100vh - 148px);

    .item {
        width: 92%;
        margin: 20px auto;
        position: relative;

        .small_Icon {
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .item_content {
            flex-direction: column;
            align-items: flex-start;

            .msg {
                .label {
                    font-size: 14px;
                    color: #7C8190;
                    margin-right: 5px;
                }

                .value {
                    font-size: 14px;
                    color: #1D2541;
                }

                margin: 10px 0;
            }
        }
    }
}
</style>
